<template>
  <div>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'rows'"
      :isSelectColumn="false"
      :isColumnFilter="false"
      :isToperInfo="false"
      :height="'400'"
      :onColumnsChange="columns => (this.columns = columns)"
    ></FilterTable>
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <el-button @click="closeDialog">返 回</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { dictionary } from '@/utils/dictMixin';
import { queryComplaint } from '@/api/customerRepair/customerComplaint/customerComplaintQuery';
import { searchDealerOrg, getDealerUser } from '@/api/customerRepair/customerComplaint/customerComplaintReception';

export default {
  name: 'Complaint',
  components: {},
  mixins: [dictionary],
  props: {
    vin: String
  },
  data() {
    this.BaseTable = null;
    return {
      fetchApi: queryComplaint,
      fetchParams: { xhrAbort: false, vin: this.vin },
      columns: this.createTableColumns()
    };
  },
  created() {
    this.getResData();
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
    this.getEmp();
  },
  methods: {
    createTableColumns() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 70,
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '投诉编号',
          dataIndex: 'COMPLAINT_NO',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '投诉人姓名',
          dataIndex: 'COMPLAINT_NAME',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '投诉摘要',
          dataIndex: 'COMPLAINT_SUMMARY',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '投诉原因',
          dataIndex: 'COMPLAINT_REASON',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '备注信息',
          dataIndex: 'SURVEY_CONTENT',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '投诉时间',
          dataIndex: 'COMPLAINT_DATE',
          sorter: true,
          filter: true,
          filterType: 'date-range',
          showOverflowTooltip: true
        },
        {
          title: '服务顾问',
          dataIndex: 'SERVICE_ADVISOR',
          sorter: true,
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true,
          editType: 'select',
          editable: false,
          editItems: []
        },

        {
          title: '车牌号',
          dataIndex: 'LICENSE',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: 'VIN',
          dataIndex: 'VIN',
          showOverflowTooltip: true,
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '投诉类型',
          dataIndex: 'COMPLAINT_TYPE',
          showOverflowTooltip: true,
          filter: true,
          sorter: true,
          filterType: 'radio',
          filterItems: this.createDictList('8215'),
          render: props => {
            return <div>{this.createDictText(props.row.COMPLAINT_TYPE, '8215')}</div>;
          },
          sorter: true
        },
        {
          title: '投诉来源',
          dataIndex: 'COMPLAINT_ORIGIN',
          showOverflowTooltip: true,
          filter: true,
          sorter: true,
          filterType: 'radio',
          filterItems: this.createDictList('8009'),
          render: props => {
            return <div>{this.createDictText(props.row.COMPLAINT_ORIGIN, '8009')}</div>;
          }
        },
        {
          title: '处理状态',
          dataIndex: 'HANDLE_STATUS',
          showOverflowTooltip: true,
          filter: true,
          sorter: true,
          filterType: 'radio',
          filterItems: this.createDictList('8048'),
          render: props => {
            return <div>{this.createDictText(props.row.HANDLE_STATUS, '8048')}</div>;
          }
        }
      ];
    },
    async getResData(val) {
      let parm = {
        vin: this.vin
      };
      this.fetchParams = Object.assign({}, parm, { xhrAbort: false });
    },
    async getEmp() {
      const res = await getDealerUser(this.editComplaintId);
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      this.columns.find(item => item.dataIndex === 'SERVICE_ADVISOR').editItems = empList; // 服务顾问表格
    },
    closeDialog() {
      this.$emit('close', false);
    }
  }
};
</script>
